<template lang="pug">
  .page
    .AccountsReceivableManage
      .pl-10.pr-10
        Tabs.ivu-tabs-nobg(@on-click="handleTabsClick" type="card")
          TabPane(v-for="tab in tabs" :label="tab.label" :name="tab.key" :animated="false")
        .pl-20.pr-20.bg-white
          Table.beautiful-table(:columns="setThead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
            .clearfix.font-16(slot="header")
              .table-title-lefttxt.pull-left
                |合计
                span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
                |条
            .clearfix.pl-20.pr-20(slot="footer")
              Page(
                :total="tableComone.totalRows"
                @on-change="onChangePage"
                @on-page-size-change="onpageSizeChange"
                show-sizer
                show-total
                placement="top"
                prev-text="上一页"
                next-text="下一页"
                :page-size-opts="[10, 20, 30, 50, 100]"
              )

</template>

<script>
import { Common } from '@/utils/common.js'
import { OrganizationApi } from '@/api/Organization.api.js'
import { HistoryAdjustThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'

export default {
  name: '', // 组织信息管理页面

  components: {
  },

  data () {
    return {
      companyId: '', // 公司ID
      companyName: '', // 公司名称
      employeeId: '', // 员工ID
      thead: _cloneDeep(HistoryAdjustThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      tabs: [
        { label: '上级组织变更', key: '1' },
        { label: '组织新增', key: '2' },
        { label: '组织启用/禁用', key: '3' },
        { label: '组织信息修改', key: '4' }
      ],
      currentTabsName: '1'
    }
  },

  computed: {
    setThead () {
      if (this.currentTabsName === '1') {
        return [...this.thead.slice(0, 1), ...this.thead.slice(2, 5), ...this.thead.slice(8, 11)]
      } else if (this.currentTabsName === '2') {
        return [...this.thead.slice(0, 1), ...this.thead.slice(2, 3), ...this.thead.slice(8, 11)]
      } else if (this.currentTabsName === '3') {
        return [...this.thead.slice(1, 3), ...this.thead.slice(8, 11)]
      } else {
        return [...this.thead.slice(0, 1), ...this.thead.slice(2, 3), ...this.thead.slice(5, 11)]
      }
    }
  },

  mounted () {
    this.query()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        LogType: this.currentTabsName,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await OrganizationApi.getLoggerList(params)
      console.log('历史调整信息res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.companyID, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.companyID
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // tab切换
    handleTabsClick (name) {
      this.currentTabsName = name
      console.log('name: ', name)
      this.query()
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
